<template>
	<view class='goods' @click='handleDetails'>
		<view class="" :class="[type=='1'?'border-Color-1':'border-Color-2']">
			<image :src="dates.imageUrl" class='goods-com-image' mode=""></image>
			<view :class="[type=='1'?'good-com-bg-title':'good-com-bg-title-2']">
				{{tipsList[Math.floor(Math.random()*10)]}}
			</view>
		</view>


		<view class='goods-name elliptical2'>{{dates.goodsName}}</view>

		<view class='good-info'>
			<view class='price'>
				￥{{dates.nowPrice}}
			</view>
			<view class='number' v-if='dates.successCount'>
				已抢{{dates.successCount}}+
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'homeGoodsItem',
		props: {
			dates: {
				type: Object,
				default: () => {}
			},
			type:{
				type:String,
				default:1
			}
		},
		data() {
			return {
				tipsList: [
					"口碑爆款 精彩好礼",
					"炙手可热 好物推荐",
					"匠心甄选 会员专享",
					"独家定制 品质保障",
					"绝无仅有 物超所值",
					"品质卓越 主打产品",
					"店长推荐 妙不可言",
					"光彩夺目 不可多得",
					"物美价廉 货真价实",
					"好货安利 人气榜单"
				]
			}
		},
		methods: {
			handleDetails() {
				this.$emit('callBack', this.$props.dates)
			}
		}
	}
</script>

<style lang="less" scoped>
	.border-Color-1 {
		width: 344rpx;
		height: 344rpx;
		background: #FFDCE6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.border-Color-2 {
		width: 344rpx;
		height: 344rpx;
		background: #FFDCE6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.goods {
		width: 344rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		background: #F6F6F7;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.goods .goods-com-image {
		width: 320rpx;
		height: 320rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.goods .goods-name {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 28rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.goods .good-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 32rpx;
		color: #FF4B4A;
	}

	.goods .good-info .price {
		font-weight: 500;
		font-size: 32rpx;
		color: #FF4B4A;

	}

	.goods .good-info .number {
		font-weight: 500;
		font-size: 24rpx;
		color: #B7B7B7;
	}

	.good-com-bg-title {
		width: 100%;
		height: 60rpx;
		background: url("@/static/static-home/main-box-1.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.good-com-bg-title-2{
		width: 100%;
		height: 60rpx;
		background: url("@/static/static-home/main-box-1.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>